<template>
    <div>
        <!-- 展示全部订单结构 -->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>挂号订单</span>
                </div>
            </template>
            <!-- 提供用户选择的下拉菜单 -->
            <el-form :inline="true">
                <el-form-item label="就诊人">
                    <el-select placeholder="请选择就诊人" v-model="patientId" @change="changeUser">
                        <el-option label="全部就诊人"></el-option>
                        <el-option v-for="item in allUser" :key="item.id"  :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="changeOrder">
                        <el-option label="全部订单" value=""></el-option>
                        <el-option  v-for="(item,index) in allOrederSetate" :key="index" :label="item.comment" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 表格展示订单数据 -->
            <el-table border class="orderCentent" :data="allOrderArr">
                <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
                <el-table-column label="医院" prop="hosname"></el-table-column>
                <el-table-column label="科室" prop="depname"></el-table-column>
                <el-table-column label="医生" prop="title"></el-table-column>
                <el-table-column label="服务费" prop="amount"></el-table-column>
                <el-table-column label="就诊人" prop="patientName"></el-table-column>
                <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
                <el-table-column label="操作" >
                    <template #="{row}">
                        <el-button type="text" @click="goDetail(row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                
                layout=" prev, pager, next, jumper,->,total, sizes" :total="total" @current-change="handler" @size-change="handler "/>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from "vue";
import { useRoute,useRouter } from "vue-router";
// 引入获取请求的方法
import { reqUserOrderInfo,reqAllUser,reqOrederSetate } from "../../../../api/user/index";
import type { UserOrderInfoResponseData,Records,AllUserResponseData,OrderStatueResponseData,AllUser,AllOrderStatue } from "../../../../api/user/type";
let $router = useRouter()
// 当前分页器页码
let pageNo = ref<number>(1);
// 当前页码一次展示几条数据
let pageSize = ref<number>(10);
// 收集就诊人的ID
let patientId = ref<string>('');
// 订单状态
let orderStatus = ref<string>('');
// 存储全部订单
let allOrderArr = ref<Records>([]);
// 存储订单的总个数
let total = ref<number>(0);
// 存储全部就诊人的信息
let allUser = ref<AllUser>([]);
// 存储全部订单状态
let allOrederSetate = ref<AllOrderStatue>([]);
// 组件挂在完毕的钩子
onMounted(()=>{
    // 获取订单的方法
    getOrderInfo();
    // 获取全部就诊人的信息以及获取全部的订单状态
    getData();
})
// 获取订单的方法
const getOrderInfo = async() =>{
    let result:UserOrderInfoResponseData =  await reqUserOrderInfo(pageNo.value,pageSize.value,patientId.value,orderStatus.value);
    if (result.code==200) {
        allOrderArr.value = result.data.records;
        total.value = result.data.total
    }
}
// 获取就诊人与订单状态接口方法
const getData = async () =>{
    // 获取全部的就诊信息
    const result:AllUserResponseData = await reqAllUser();
    // 获取全部订单状态
    const result2:OrderStatueResponseData = await reqOrederSetate();
    allUser.value = result.data;
    allOrederSetate.value = result2.data
}
// 详情按钮的回调
const goDetail = (row:any) =>{
    $router.push({path:'/user/order',query:{orderId:row.id}})
}
// 分页器组件根据页码改变发生回调
const handler = (pager:number)=>{
    pageNo.value = pager;
    getOrderInfo();
}
// 就诊人的下拉回调
const changeUser = ()=>{
    // 根据订单人信息再次获得订单人数据
    getOrderInfo();
}
// 订单状态的下拉回调
const changeOrder =()=>{
    // 根据订单人状态再次获得订单人数据
    getOrderInfo();
}
</script>

<style lang="scss" scoped>
.box-card {
    .orderCentent {
        margin: 20px 0px;
    }
}
</style>